<template>
<div class="orderquery">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单查询</el-breadcrumb-item>
    </el-breadcrumb>
  <div class="orderquery_search">
    <ul>
      <li><span>订单编号:</span>
        <el-input v-model="input_ordernum" placeholder="请输入订单编号"></el-input>
      </li>
      <li><span>外贸合同号:</span>
        <el-input v-model="input_contractnum" placeholder="请输入外贸合同号"></el-input>
      </li>
      <li><span>买家名称:</span>
        <el-input v-model="input_name" placeholder="请输入买家名称"></el-input>
      </li>
      <li><span>流程发起人:</span>
        <el-input v-model="originator" placeholder="请输入流程发起人"></el-input>
      </li>
      <li ><span>订单流程:</span>
        <el-select v-model="order_process" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </li>
      <li><span>订单状态:</span>
        <el-select v-model="order_state" placeholder="请选择">
          <el-option
            v-for="item in options02"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </li>
      <li class="blockli"><span>提交日期:</span>
        <div class="block">
            <el-date-picker
            v-model="time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
            </el-date-picker>
        </div>
      </li>
      <li class="blockli"><span>办结日期:</span>
        <div class="block">
            <el-date-picker
            v-model="time02"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
            </el-date-picker>
        </div>
      </li>
      <li><span>订单作废:</span>
        <el-switch
        v-model="cancel">
        </el-switch>
      </li>
    </ul>
    <el-button type="primary" @click="query" disabled>查询</el-button>
  </div>
  <div class="orderquery-table">
    <el-table :data="tableData" style="width: 100%" >
      <el-table-column prop="order_number" label="订单编号" class-name="order_number" width="180px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="getList(scope.$index, scope.row)">{{scope.row.order_number}}</el-button>
          </template>
      </el-table-column>
      <el-table-column prop="order_process" label="订单流程" min-width="180px">
      </el-table-column>
      <el-table-column prop="contract_number" label="外贸合同号" width="180px">
      </el-table-column>
      <el-table-column prop="name" label="买家名称" min-width="100px">
      </el-table-column>
      <el-table-column prop="name" label="提交时间" width="180px">
      </el-table-column>
      <el-table-column prop="arrive_time" label="办结时间" width="180px">
      </el-table-column>
      <el-table-column prop="approver" label="当前审批人" min-width="100px">
      </el-table-column>
      <el-table-column prop="process_initiator" label="流程发起人" min-width="100px">
      </el-table-column>
      <el-table-column prop="order_status" label="订单状态" min-width="100px">
      </el-table-column>
      <el-table-column prop="cancel" label="作废订单" min-width="100px">
      </el-table-column>
      <el-table-column prop="" label="操作" min-width="180px">
          <template slot-scope="scope">
              <el-button type="text" v-if="scope.row.cancel == '否' && scope.row.order_status == '办结'" @click = "launch(scope.$index, scope.row)">发起后续流程</el-button>
              <el-button type="text" v-else-if="scope.row.order_status == '取消'"></el-button>
              <el-button type="text" v-else disabled>发起后续流程</el-button>
          </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog
      :visible.sync="dialogVisibleList"
      width="30%">
      <div>
        <h1>这里是当前表单</h1>
      </div>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisibleList = false">取 消</el-button>
      </span>
  </el-dialog>
</div>
</template>

<script>
import {getTable} from '@/server/orderQuery/index.js'

export default {
  data() {
    return {
        dialogVisibleList: false,
      input_ordernum: '',//订单编号
      input_contractnum: '',//外贸合同号
      originator: '',//流程发起人
      input_name: '',//买家名称
      order_process: '',//订单流程
      order_state: 'all',//订单状态
      cancel: '',//订单作废
      time: '',//时间
      time02: '',//时间2
      options: [{//选择框选项
          value: '选项1',
          label: '1业务提单'
        }, {
          value: '选项2',
          label: '2买家付定金给tcf'
        }, {
          value: '选项3',
          label: '3tcf付定金给工厂'
        }, {
          value: '选项4',
          label: '4tcf付尾款到工厂'
        }, {
          value: '选项5',
          label: '5-8单证流程'
        }, {
          value: '选项6',
          label: '9买家付尾款给tcf'
        }],
        options02: [{
            value: 'all',
            label: '全部'
          }, {
            value: '办理中',
            label: '办理中'
          }, {
            value: '办结',
            label: '办结'
          }, {
            value: '取消',
            label: '取消'
          }],
      tableData: [],//表格数据
    }
  },
  methods: {
    query(){//点击查询
        let obj = {
            input_ordernum: this.input_ordernum,//订单编号
            input_contractnum: this.input_contractnum,//外贸合同号
            originator: this.originator,//流程发起人
            input_name: this.input_name,//买家名称
            order_process: this.order_process,//订单流程
            order_state: this.order_state,//订单状态
            cancel: this.cancel,//订单作废
            time: this.time,//时间
            time02: this.time02,//时间2
        };
        getTable(obj).then((res) => {
            this.tableData = res.data.data.datas
        })
    },
    // 发起后续流程
    launch(index, row){
        console.log(index, row);
    },
    //
    getList(index,row){
        this.dialogVisibleList = true;
        console.log(index, row)
    }
  }
}
</script>

<style scoped lang="sass">

@import "../../assets/css/common.sass"

.orderquery
  width: 100%
  padding: 20px
  box-sizing: border-box
  .orderquery_search
    width: 100%
    border: 1px solid #ebebeb
    border-radius: 4px
    padding: 20px
    padding-bottom: 10px
    box-sizing: border-box
    &::after
      @include  clear
    ul
      width: 90%
      float: left
      &:after
        @include clear
      li
        width: 33%
        height: 40px
        line-height: 40px
        float: left
        padding-right: 10px
        box-sizing: border-box
        margin-bottom: 10px
        span
          font-size: 14px
          display: inline-block
          width: 80px
        .el-input, .el-select,
          width: 65%
        .block
          width: 75.5%
          display: inline-block
          div
            width: 100%
      .blockli
        width: 50%
    .el-button
      width: 10%
      height: 40px
.el-select-dropdown__item
  padding: 0 20px !important
.orderquery-table
  width: 100%
  padding: 20px
  box-sizing: border-box
  border: 1px solid #ebebeb
  border-radius: 4px
  margin-top: 20px
.order_number
  color: #409EFF
</style>
